<template>
    <v-container fluid class="dashboard-container">
      <!-- 顶部关键指标卡片 -->
      <v-row class="mb-4">
        <v-col cols="12" sm="6" md="3" v-for="(item, index) in keyMetrics" :key="index">
          <v-card class="metric-card" elevation="10" :color="item.color">
            <v-card-text class="text-white">
              <div class="d-flex align-center">
                <div class="flex-grow-1">
                  <h3 class="text-h4 font-weight-bold">{{ item.value }}</h3>
                  <p class="text-subtitle-1 opacity-75">{{ item.title }}</p>
                </div>
                <v-icon size="48" class="opacity-75">{{ item.icon }}</v-icon>
              </div>
              <div class="mt-2">
                <v-chip 
                  :color="item.trend > 0 ? 'green' : 'red'" 
                  size="small" 
                  variant="outlined"
                  :prepend-icon="item.trend > 0 ? 'mdi-trending-up' : 'mdi-trending-down'"
                >
                  {{ item.trend > 0 ? '+' : '' }}{{ item.trend }}%
                </v-chip>
              </div>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
  
      <!-- 图表区域 -->
      <v-row class="mb-4" >
        <!-- 销售趋势图 -->
        <v-col cols="12" lg="8" >
          <v-card elevation="10">
            <v-card-title>
              <v-icon class="mr-2">mdi-chart-line</v-icon>
              销售趋势分析
            </v-card-title>
                       <v-card-text>
               <VueApexCharts
                 height="300"
                 type="line"
                 :options="salesChartOptions"
                 :series="salesChartSeries"
               />
             </v-card-text>
          </v-card>
        </v-col>
  
        <!-- 销售分布饼图 -->
        <v-col cols="12" lg="4" style="height: auto;">
          <v-card elevation="10">
            <v-card-title>
              <v-icon class="mr-2">mdi-chart-pie</v-icon>
              销售分布
            </v-card-title>
                       <v-card-text>
               <VueApexCharts
                 height="300"
                 type="pie"
                 :options="pieChartOptions"
                 :series="pieChartSeries"
               />
             </v-card-text>
          </v-card>
        </v-col>
      </v-row>
  
      <!-- 业务数据表格和其他信息 -->
      <v-row>
        <!-- 最新订单表格 -->
        <v-col cols="12" lg="8">
          <v-card elevation="10">
            <v-card-title>
              <v-icon class="mr-2">mdi-table</v-icon>
              最新订单
              <v-spacer></v-spacer>
              <v-btn color="primary" variant="outlined" size="small">
                查看全部
                <v-icon end>mdi-arrow-right</v-icon>
              </v-btn>
            </v-card-title>
            <v-card-text>
              <v-data-table
                :headers="orderHeaders"
                :items="recentOrders"
                :items-per-page="5"
                hide-default-footer
                class="elevation-10"
              >
                <template v-slot:item.status="{ item }">
                  <v-chip
                    :color="getStatusColor(item.status)"
                    size="small"
                    variant="flat"
                  >
                    {{ item.status }}
                  </v-chip>
                </template>
                <template v-slot:item.amount="{ item }">
                  <span class="font-weight-bold">¥{{ item.amount.toLocaleString() }}</span>
                </template>
              </v-data-table>
            </v-card-text>
          </v-card>
        </v-col>
  
        <!-- 右侧信息卡片 -->
        <v-col cols="12" lg="4">
          <!-- 用户统计 -->
          <v-card elevation="10" class="mb-4">
            <v-card-title>
              <v-icon class="mr-2">mdi-account-group</v-icon>
              用户统计
            </v-card-title>
            <v-card-text>
              <div class="d-flex align-center mb-3">
                <v-avatar color="primary" size="40" class="mr-3">
                  <v-icon>mdi-account</v-icon>
                </v-avatar>
                <div>
                  <h4>{{ userStats.totalUsers.toLocaleString() }}</h4>
                  <p class="text-caption mb-0">总用户数</p>
                </div>
              </div>
              <div class="d-flex align-center mb-3">
                <v-avatar color="success" size="40" class="mr-3">
                  <v-icon>mdi-account-check</v-icon>
                </v-avatar>
                <div>
                  <h4>{{ userStats.activeUsers.toLocaleString() }}</h4>
                  <p class="text-caption mb-0">活跃用户</p>
                </div>
              </div>
              <div class="d-flex align-center">
                <v-avatar color="info" size="40" class="mr-3">
                  <v-icon>mdi-account-plus</v-icon>
                </v-avatar>
                <div>
                  <h4>+{{ userStats.newUsers }}</h4>
                  <p class="text-caption mb-0">今日新增</p>
                </div>
              </div>
            </v-card-text>
          </v-card>
  
          <!-- 快速操作 -->
          <v-card elevation="10">
            <v-card-title>
              <v-icon class="mr-2">mdi-lightning-bolt</v-icon>
              快速操作
            </v-card-title>
            <v-card-text>
              <v-list>
                <v-list-item
                  v-for="(action, index) in quickActions"
                  :key="index"
                  @click="handleQuickAction(action)"
                  :prepend-icon="action.icon"
                  :title="action.title"
                  :subtitle="action.subtitle"
                  class="mb-2"
                >
                  <template v-slot:append>
                    <v-icon>mdi-chevron-right</v-icon>
                  </template>
                </v-list-item>
              </v-list>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
  
      <!-- 系统通知 -->
      <v-row class="mt-4">
        <v-col cols="12">
          <v-card elevation="10">
            <v-card-title>
              <v-icon class="mr-2">mdi-bell</v-icon>
              系统通知
            </v-card-title>
            <v-card-text>
              <v-timeline align="start" density="compact">
                <v-timeline-item
                  v-for="(notice, index) in systemNotices"
                  :key="index"
                  :dot-color="notice.color"
                  size="small"
                >
                  <template v-slot:opposite>
                    <span class="text-caption">{{ notice.time }}</span>
                  </template>
                  <div>
                    <h6 class="text-subtitle-2">{{ notice.title }}</h6>
                    <p class="text-body-2 mb-0">{{ notice.content }}</p>
                  </div>
                </v-timeline-item>
              </v-timeline>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import VueApexCharts from 'vue3-apexcharts';
  
  // 关键业务指标数据
  const keyMetrics = ref([
    {
      title: '总销售额',
      value: '¥2,845,520',
      trend: 12.5,
      color: 'primary',
      icon: 'mdi-currency-usd'
    },
    {
      title: '总订单数',
      value: '8,956',
      trend: 8.2,
      color: 'success',
      icon: 'mdi-cart'
    },
    {
      title: '新用户数',
      value: '1,234',
      trend: -2.1,
      color: 'info',
      icon: 'mdi-account-plus'
    },
    {
      title: '转化率',
      value: '23.8%',
      trend: 4.3,
      color: 'warning',
      icon: 'mdi-chart-line'
    }
  ]);
  
  // 用户统计数据
  const userStats = ref({
    totalUsers: 45672,
    activeUsers: 23456,
    newUsers: 156
  });
  
  // 订单表格表头
  const orderHeaders = ref([
    { title: '订单号', key: 'orderNo', sortable: false },
    { title: '客户名称', key: 'customerName', sortable: false },
    { title: '金额', key: 'amount', sortable: false },
    { title: '状态', key: 'status', sortable: false },
    { title: '创建时间', key: 'createTime', sortable: false }
  ]);
  
  // 最新订单数据
  const recentOrders = ref([
    {
      orderNo: 'ORD-2024-001',
      customerName: '张三',
      amount: 15800,
      status: '已完成',
      createTime: '2024-01-15 10:30'
    },
    {
      orderNo: 'ORD-2024-002',
      customerName: '李四',
      amount: 8900,
      status: '处理中',
      createTime: '2024-01-15 09:15'
    },
    {
      orderNo: 'ORD-2024-003',
      customerName: '王五',
      amount: 25600,
      status: '待支付',
      createTime: '2024-01-15 08:45'
    },
    {
      orderNo: 'ORD-2024-004',
      customerName: '赵六',
      amount: 12300,
      status: '已完成',
      createTime: '2024-01-14 16:20'
    },
    {
      orderNo: 'ORD-2024-005',
      customerName: '钱七',
      amount: 7500,
      status: '已取消',
      createTime: '2024-01-14 14:10'
    }
  ]);
  
  // 快速操作数据
  const quickActions = ref([
    {
      title: '添加用户',
      subtitle: '创建新的系统用户',
      icon: 'mdi-account-plus',
      action: 'addUser'
    },
    {
      title: '系统设置',
      subtitle: '配置系统参数',
      icon: 'mdi-cog',
      action: 'settings'
    },
    {
      title: '数据备份',
      subtitle: '备份重要数据',
      icon: 'mdi-backup-restore',
      action: 'backup'
    },
    {
      title: '查看日志',
      subtitle: '系统操作日志',
      icon: 'mdi-file-document',
      action: 'logs'
    }
  ]);
  
  // 系统通知数据
  const systemNotices = ref([
    {
      title: '系统更新',
      content: '系统已成功更新至版本 v2.1.0',
      time: '2小时前',
      color: 'primary'
    },
    {
      title: '新用户注册',
      content: '今日新增用户 156 人',
      time: '4小时前',
      color: 'success'
    },
    {
      title: '服务器维护',
      content: '定期维护已完成，系统运行正常',
      time: '1天前',
      color: 'info'
    },
    {
      title: '安全提醒',
      content: '检测到异常登录尝试，已自动拦截',
      time: '2天前',
      color: 'warning'
    }
  ]);
  
  // 销售趋势图配置
  const salesChartOptions = ref({
    chart: {
      id: 'sales-trend',
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false
      }
    },
    xaxis: {
      categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yaxis: [
      {
        title: {
          text: '销售额(万元)'
        },
        seriesName: '销售额',
      },
      {
        opposite: true,
        title: {
          text: '订单数'
        },
        seriesName: '订单数',
      }
    ],
    stroke: {
      curve: 'smooth',
      width: 2
    },
    fill: {
      type: 'gradient',
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.7,
        opacityTo: 0.1
      }
    },
    colors: ['#1976D2', '#4CAF50'],
    tooltip: {
      shared: true,
      intersect: false
    },
    legend: {
      position: 'top'
    }
  });
  
  const salesChartSeries = ref([
    {
      name: '销售额',
      type: 'area',
      data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
    },
    {
      name: '订单数',
      type: 'line',
      data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
    }
  ]);
  
  // 饼图配置
  const pieChartOptions = ref({
    chart: {
      type: 'pie'
    },
    labels: ['线上销售', '线下销售', '代理销售', '批发销售'],
    colors: ['#1976D2', '#4CAF50', '#FF9800', '#F44336'],
    legend: {
      position: 'bottom'
    },
    tooltip: {
      y: {
        formatter: (val: number) => val + '万元'
      }
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          chart: {
            width: 200
          },
          legend: {
            position: 'bottom'
          }
        }
      }
    ]
  });
  
  const pieChartSeries = ref([335, 310, 234, 135]);
  
  // 获取状态颜色
  const getStatusColor = (status: string) => {
    const colorMap: { [key: string]: string } = {
      '已完成': 'success',
      '处理中': 'warning',
      '待支付': 'info',
      '已取消': 'error'
    };
    return colorMap[status] || 'default';
  };
  
  // 处理快速操作
  const handleQuickAction = (action: any) => {
    console.log('快速操作:', action.title);
    // 这里可以添加具体的操作逻辑
  };
  </script>
  
  <style scoped>
  .dashboard-container {
  
    min-height: 100vh;
  }
  
  .metric-card {
    transition: transform 0.3s ease;
  }
  
  .metric-card:hover {
    transform: translateY(-4px);
  }
  
  .v-theme--dark .dashboard-container {
    background-color: #121212;
  }
  </style>
  
  
    